<template>
  <div >
    <el-card class="box-card">
      <template #header>
        <div class="customerTitle1">
          <div v-if="route.query.path ==1 || route.query.path ==2">
            <span class="leve_title" >{{customerListInFo && customerListInFo.buyer_customer_name+'-'}}销售订单详情</span>
            <div class="add_order_font1">
              <span>需求编码：{{customerListInFo && customerListInFo.order_no}} </span>
              <span style="margin-left: 10px;margin-right: 10px">订单状态：{{customerListInFo && customerListInFo.status_str}} </span>
              <span>销售员：{{customerListInFo && customerListInFo.sales_dept_name }}部门-{{customerListInFo && customerListInFo.undertaker_name}} </span>
            </div>
          </div>
          <div v-if="route.query.path !=1 && route.query.path !=2">
            <span class="leve_title" >{{title(customerListInFo?.type)}}</span>
            <div class="add_order_font1">
              <span>总单号：{{customerListInFo && customerListInFo.uid}} </span>
              <span style="margin-left: 10px;margin-right: 10px">订单状态：
              {{customerListInFo && customerListInFo.status_str }}
              </span>
              <span>销售员：{{customerListInFo && customerListInFo.sales_dept_name}}部门-{{customerListInFo && customerListInFo.sales_user_name}} </span>
            </div>
          </div>
          <div>
            <el-button
              @click="back"
            >
              <!--              {{route.query.path != 5? route.query.path == 1 ? '取消承接' :'取消':'返回'}}-->
              返回
            </el-button>
          </div>
        </div>
      </template>
      <div>
        <VabStep :steps="route.query.path !=1&& route.query.path !=2 ? arr_approve1:arr_approve "/>
      </div>
    </el-card>
    <el-card style="height: 450px">
      <template #header>
        <div class="customerTitle1">
          <span class="leve2_title leave3Title titleHead1">确认收货</span>
          <div >
            <el-button
              type="primary"
              @click="refresh(formList)"
              :loading="loading"
              :disabled = "statusButton >= 90"
            >
              确认收货
            </el-button>
            <!--            <el-button
                          class="customerButton1"
                          plain
                          size="small"
                          type="primary"
                          @click="download"
                        >
                          下载
                        </el-button>-->
          </div>
        </div>
      </template>
      <div>
        <el-form
          v-if="!statusButton >= 90"
          label-width="105px"
          ref="formDate"
          :model="formList"
        >
          <el-form-item label="收货备注" prop="remark">
            <el-input v-model="formList.remark" />
          </el-form-item>
          <el-form-item label="签收单上传" prop="filter" class="upLoad">
            <UploadFile style="width: 100%"  drag :fileList="fileList" ref="uploadFileRef"/>
          </el-form-item>
        </el-form>
        <div v-else style="margin-top: 20px">
          <div style="display: flex;margin-bottom: 30px">
            <div style="width: 100px;text-align: right">
              收货备注
            </div>
            <div style="flex: auto;margin-left: 30px">
              {{formList.remark}}
            </div>
          </div>
          <div style="display: flex">
            <div style="width: 100px;text-align: right">
              签收单上传
            </div>
            <div style="margin-left: 30px">
              <div  v-for="(value,index) in fileList" :key="index"  class="textFont" style="display: flex;align-items: center;margin-bottom: 15px" @click="upLoade(value)">
                <el-icon style="margin-right: 5px"><Document /></el-icon>
                {{value.name}}
              </div>
            </div>

          </div>
        </div>
      </div>
    </el-card>
    <el-dialog
      v-model="openUp"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :destroy-on-close="true"
      width="60%"
    >
      <vab-pdf :source="openUp" />
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import {ref} from "vue";
import VabPdf from '/@/plugins/VabPdf'
import {FieldFormat} from "/@/utils/utils";
import {orderList} from "/@/api/dms/order";
import {customerOrderInfo, customerReceipt} from "/@/api/dms/customerOrder";
import {ElMessage} from "element-plus";
import { orderGroupInfo, orderGroupReceipt, orderGroupReceiptInfo } from "/@/api/dms/order/group";
import router from "/@/router";
import {orderConfirmReceipt} from "/@/api/dms/order/confirm";
import UploadFile from '../../orderQuery/component/UpLoadFile.vue'
import lodash from "lodash";
defineOptions({
  name: 'Receipt',
})
const route:any = useRoute()
const orderPath:any = ref(localStorage.getItem('orderPath'))
const orderPath2:any = ref(localStorage.getItem('orderPath2'))
const openUp = ref<any>(undefined)
// ***********
const arr_approve = ref([
  { title: '客户需求', active: true, path:`/order/treatment?path=${route.query.path}&id=${route.query.order}`},
  { title: '销售订单', active: true, path:`/order/addOrder?path=${route.query.path}&id=${route.query.id}&order=${route.query.order}` },
  { title: '销售出库单', active: true, path:`/order/retrieval?path=${route.query.path}&id=${route.query.id}&order=${route.query.order || 0}` },
  { title: '快递运输', active: true, path:`/order/expressCompany?path=${route.query.path}&id=${route.query.id}&order=${route.query.order || 0}` },
  { title: '收货确认', active: true,path:`/order/receipt?path=${route.query.path}&id=${route.query.id}&order=${route.query.order || 0}` },
])
const arr_approve1 = ref( [
  { title: '销售订单', active: true,path:`/order/addOrder?path=${route.query.path}&id=${route.query.id}`},
  { title: '销售出库单', active: true,path:`/order/retrieval?path=${route.query.path}&id=${route.query.id}` },
  { title: '快递运输', active: true,path:`/order/expressCompany?path=${route.query.path}&id=${route.query.id}` },
  { title: '收货确认', active: true,path:`/order/receipt?path=${route.query.path}&id=${route.query.id}` },
])
const _FieldFormat = (value: string, type = '') => {
  return FieldFormat(value, type)
}
const formList = ref({
  remark:'',
  filter:'',
})
const loading = ref<boolean>(false)
const detailLoading = ref<boolean>(false)
const detailList = ref<any>()
const customer_order_list = ref<any>([])
const fileList = ref<any>([])
const uploadFileRef = ref<any>(null)
// 判断 状态
const statusButton =ref<any>(0)
const handleCurrentChange =(va:any)=>{
  detailList.value = va
}
//获取列表
// const getOrderList =(id:any)=>{
//   loading.value = true
//   orderList({page:1,pagesize:2000,order_group_uid:route.query.id}).then((data:any)=>{
//     if(data.code == 200){
//       loading.value = false
//       customer_order_list.value = data.data.list
//     }
//   })
// }
// 客户端
const customerListInFo = ref<any>(undefined)
const getCustomerInfo = ()=>{
  if( route.query.order &&  route.query.path ==1 ||  route.query.path ==2){
    customerOrderInfo({order_no:route.query.order}).then((data:any)=>{
      if(data.code == 200){
        customer_order_list.value = data.data.stock_out
        customerListInFo.value = data.data
      }
    })
    orderGroupInfo({uid:route.query.id}).then((data:any)=>{
      if(data.code == 200){
        statusButton.value = data.data.status
       /* if( data.data.type == 2){
          arr_approve1[1].title='直接调拨单'
        }*/
      }
    })
  }else if( route.query.order &&  route.query.path !=1 ||  route.query.path !=2) {
    orderGroupInfo({uid:route.query.id}).then((data:any)=>{
      if(data.code == 200){
        customer_order_list.value = data.data.stock_out
        customerListInFo.value = data.data
        statusButton.value = data.data.status
        if( data.data.type == 2){
          arr_approve1.value[1].title='直接调拨单'
        }
      }

    })
  }
}
const back = ()=>{
  if( route.query.path == 2 || route.query.path == 1) {
    if (orderPath2.value == 1) {
      router.push('/order/customerOrder')
    } else {
      router.push('/order/orderQuery')
    }
  }else {
    if(orderPath.value == 1){
      router.push('/order/standardOrder')
    }else if(orderPath.value == 2){
      router.push('/order/consignOrder')
    }else {
      router.push('/order/orderQuery')
    }
  }
}
/*const refresh = (va:any)=>{
  const uid = customerListInFo.value.detail?.map((i:any)=>i.order_uid)

  if(route.query.order &&  route.query.path ==1 ||  route.query.path ==2){
    orderConfirmReceipt({uid:uid,receipt_mark:va.value.remark,receipt_form_img:va.filter}).then((data:any)=>{
      if(data.code == 200){
        formList.value = {
          remark:'',
          filter:'',
        }
        ElMessage.success(`提交成功`)
      }
    })
  }else{
    customerReceipt({uid:uid,receipt_mark:va.remark,receipt_form_img:va.filter}).then((data:any)=>{
      if(data.code == 200){
        formList.value = {
          remark:'',
          filter:'',
        }
        ElMessage.success(`提交成功`)
      }
    })
  }
}*/
const refresh = lodash.debounce(async (va:any='')=>{
  const url = uploadFileRef.value!.list.map((item:any,index:any)=>{return {response:item.response ? item.response : item.url,name:item.name}})
  orderGroupReceipt({uid:route.query.id,receipt_mark:va.remark,receipt_form_img:JSON.stringify(url)}).then((data:any)=>{
    if(data.code == 200){
      ElMessage.success(`提交成功`)
    }
  })

},500)
const receiptOrder = ()=>{
  orderGroupReceiptInfo({order_no:route.query.id}).then((data:any)=>{
    if(data.code == 200){
      fileList.value = data.data.receipt_form_img !== null ? JSON.parse(data.data.receipt_form_img): []
      formList.value.remark = data.data.receipt_mark
    }
  })
}
// 下载
const upLoade =(uploadFile:any)=>{
  if (uploadFile.response.split('.').pop() == 'pdf'){
    openUp.value = uploadFile.response
  }else {
    window.open(uploadFile.response)
  }
}
const title=(va:any)=>{
  if(va == 2){
    return '寄售订单'
  }else{
    return '销售订单详情'
  }
}
onMounted(()=>{
  getCustomerInfo()
  receiptOrder()
})
</script>

<style lang="scss" scoped>
@import "../../index";
.upLoad{
  :deep(){
    .el-upload-list{
      width: 100%;
    }
    .el-form-item__content{
      line-height: 16px;
    }
  }
}
</style>


